<template>
  <Back sty="sty" title="预约挂号" >
    <!-- 顶部按钮 -->
        <template #buttons>
            <el-button type="primary" size="small" plain>导入</el-button>
            <el-button type="primary" size="small" plain>导出</el-button>
        </template>

    <template >
      <div class="top">
        <div class="typebox">
          <input
            type="radio"
            name="type"
            checked
            @click="changeStateBack"
          /><span>全部</span>
          <input
            type="radio"
            name="type"
            value="待就诊"
            @click="changeState"
          /><span>待就诊</span>
          <input
            type="radio"
            name="type"
            value="已就诊"
            @click="changeState"
          /><span>已就诊</span>
          <input
            type="radio"
            name="type"
            value="已取消"
            @click="changeState"
          /><span>已取消</span>
        </div>
        <div class="block">
          <!-- 有报错 -->
          <el-date-picker
            v-model="dataValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <el-select v-model="value" style="margin: 0px" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div>
          <input type="text" placeholder="请输入医生/病人姓名" class="search" />
          <button class="searchbtn">搜索</button>
        </div>
      </div>
    </template>
      


    <template #table_body>
        <div class="msgbody">
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" fixed> </el-table-column>
          <el-table-column
            label="患者姓名"
            width="70"
            prop="sicknessName"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column
            style="font-size: 12px"
            label="就诊卡号"
            width="80"
            prop="jzNumber"
            align="center"
          ></el-table-column>
          <el-table-column
            label="身份证号"
            width="160"
            show-overflow-tooltip
            prop="idCard"
            align="center"
          ></el-table-column>
          <el-table-column
            label="手机号码"
            width="100"
            show-overflow-tooltip
            prop="phoneNumber"
            align="center"
          ></el-table-column>
          <el-table-column
            label="挂号科室"
            width="90"
            show-overflow-tooltip
            align="center"
            prop="ghRoom"
          ></el-table-column>
          <el-table-column
            label="挂号类型"
            width="80"
            show-overflow-tooltip
            prop="ghType"
            align="center"
          ></el-table-column>
          <el-table-column
            label="挂号费"
            width="60"
            align="center"
            show-overflow-tooltip
            prop="ghMoney"
          ></el-table-column>
          <el-table-column
            label="挂号状态"
            width="70"
            show-overflow-tooltip
            prop="ghState"
            align="center"
          ></el-table-column>
          <el-table-column
            label="就诊日期"
            width="100"
            align="center"
            show-overflow-tooltip
            prop="jzDate"
          ></el-table-column>
          <el-table-column
            label="候诊时间"
            width="180"
            show-overflow-tooltip
            prop="jzTime"
            align="center"
          ></el-table-column>
          <el-table-column
            label="预约时间"
            width="150"
            align="center"
            show-overflow-tooltip
            prop="bookingTime"
            fixed="right"
          ></el-table-column>
          <el-table-column
            label="操作"
            width="50"
            align="center"
            fixed="right"
            show-overflow-tooltip
            ><i
              class="el-icon-s-order"
              style="font-size: '32px'"
              @click="godetail"
            ></i
          ></el-table-column>
        </el-table>
      </div>
    </template>
      <template #page>


        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
        <!-- <Page 
          :pageNum="tableData.length"
        /> -->

      </template>
  </Back>
</template>
<script>
import Vue from "vue";
import { Button, Dropdown } from "element-ui";
import { getUserMsgList, changeUserMsgList } from "@/api/Subscribe";
import Back from '@/components/Part/BackColor.vue'
// import Page from '@/components/Part/paga.vue'
Vue.use(Button);
Vue.use(Dropdown);
// Vue.prototype.$axios = axios
export default {
  data() {
    return {
      dataValue: "",
      tableData: [],
      currentPage: 1, // 当前页码
      total: 100, // 总条数
      pageSize: 10, // 每页的数据条数
      options: [
        {
          value: "选项1",
          label: "内科",
        },
        {
          value: "选项2",
          label: "外科",
        },
      ],
      value: "",
    };
  },
  mounted() {
    getUserMsgList().then((res) => {
      //渲染初始数据
      // console.log(res);
      this.tableData = res.list;
    });
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    godetail() {
      this.$router.push("/subscribe/detail");
    },
    changeState(val) {
      //更改待就诊、已就诊的状态的方法
      // console.log(3);
      // console.log(val.target.value);
      changeUserMsgList().then((res) => {
        //更改数据接口
        res.data.map((item) => {
          item.ghState = val.target.value;
          return item;
        });
        this.tableData = res.data;
      });
    },
    changeStateBack() {
      //点击全部把之前的数据重新渲染回去
      getUserMsgList().then((res) => {
        //渲染初始数据
        // console.log(res);
        this.tableData = res.list;
      });
    },
    changeTime(val) {
      //点击删选时间的数据
      console.log(val[0]);
      changeUserMsgList().then((res) => {
        res.data.map((item) => {
          item.jzDate = val[0];
          return item.jzDate;
        });
        this.tableData = res.data;
      });

    },
  },
  components: {
    Back,
    // Page
  }
};
</script>
<style lang="scss" scoped>
  .msgbody{
    padding-top: 20px;
  }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  div,.el-select{
    flex: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .el-range-editor{
      width: auto;
    }
  }
}
.searchbtn {
  width: 64px;
  height: 32px;
  background-color: rgba(0, 110, 255, 1);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 16px;
}
.search {
  /* width: 320px; */
  height: 40px;
  border: 1px solid #ccc;
  text-indent: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 10px;
  margin-left: 10px;
}
.firstselect {
  width: 160px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}
.el-dropdown-menu__item {
  width: 100px;
}
.cion {
  width: 24px;
  border-radius: 4px;
  height: 8px;
  background-color: rgba(0, 110, 255, 1);
}
.guahao {
  font-size: 24px;
}
.typebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  padding-right: 20px;
}
.typebox input {
  width: 18px;
  height: 18px;
}
.typebox span {
  font-size: 14px;
}
.block {
  padding-right: 20px;
}
.el-button {
  background-color: rgba(0, 110, 255, 0.0980392156862);
  color: #006eff;
  border: none;
}
</style>
<style>
[sty="sty"] .el-table th.el-table__cell > .cell {
  color: #999;
  font-size: 12px;
  font-weight: lighter;
  text-align: center;
}
[sty="sty"] [class^="el-icon-"] {
  font-size: 24px;
  color: #006eff;
}
[sty="sty"] .el-table td.el-table__cell div {
  text-align: center;
}
[sty="sty"] .el-select .el-input__inner {
  padding-right: 0;
}
</style>